<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <!-- 引入ElementUI样式 -->
		<link rel="stylesheet" href="element/css/index.css" />
		<!--引入vue的库，一定要在element库文件之前-->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="element/vue.js"></script>
		<!-- 引入ElementUI组件库 -->
		<script src="element/elmentui_index.js"></script>
		<!-- <script src="element/elmentui_table.js"></script> -->
		<!-- 引入axios库，完成后台异步请求的http通信，替代jquery ajax（也可以使用） -->		
		<script src="element/axios.min.js"></script>
		 <!-- 解决axios跨域无法传递form表单数据到后台实体类的问题 -->		
		<script src="element/qs.min.js"></script>
	</head>
	<body>			
		<div id="app">
			<el-form :model="userInfoBean" status-icon ref="userInfoBean" label-width="100px" class="demo-ruleForm">
			 <el-row>
			   <el-col :span="8">
				   <el-form-item label="用户名" prop="username">
				     <el-input type="password" v-model="userInfoBean.username" autocomplete="off"></el-input>
				   </el-form-item>
				</el-col>
			 </el-row>
			 
			 <el-row>
			   <el-col :span="8">
			 		 <el-form-item label="密码" prop="userpwd">
			 			 <el-input type="password" v-model="userInfoBean.userpwd" autocomplete="off"></el-input>
			 			</el-form-item>
			 		 <el-form-item>
			 </el-row>
			  
			    <el-button type="primary" @click="submitForm()">提交</el-button>
			    <el-button @click="resetForm('userInfoBean')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				userInfoBean:{
					username:"",
					userpwd:""
					
				}
				
			},
			methods:{
				submitForm:function(){
					console.log("发送请求")
					
					var param=Qs.stringify(this.userInfoBean)
					// console.log(param)
					// console.log(Qs.stringify(param))
					
					axios.post('http://localhost:8086/nsd_springbootserver/login/logined', param)
					  .then(function (response) {
					    console.log(response);
						if(response.data="ok"){
							window.location.href="index.html"
						}else{
							
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
					
				},
				resetForm:function(userInfoBean){
					 this.$refs[userInfoBean].resetFields();
				}
				
				
			}
			
			
			
		})
		
		</script>
		
		
		
		
	</body>
</html>
